<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
        background: #fff;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width:100%;
        height: 60px;
        background: #fff;
        border-bottom:1px solid #d5d5d4;
        font-size:16px;
        color:#1b73fb;
        font-weight:500;
        line-height:60px;
        text-indent:1em;
        border-right:1px solid #d5d5d4;

    }
    .nav_Search{

    }
    /* .nav{
        width:100%;
        min-height:60px;
        background-color:#598df1;
        position:relative;
    }
    .nav_logo{
        display:block;
        position:absolute;
        top: 5px;
        left:5px;
    }
    .nav_Home{
        width:500px;
        height:60px;
        font-size:16px;
        font-weight:600;
        line-height:75px;
        color:#fff;
        text-indent:1em;
        position:absolute;
        top: 0px;
        left:200px;
    }
    .nav_Right{
        width:500px;
        height:60px;
        position:absolute;
        top: 0;
        right:0;
    }
    .nav_Search{
        margin:15px;
    }
    .icon_1{
        width:24px;
        height:26px;
        display:block;
        background:url('../images/icon-loggin.png');
        position:absolute;
        top: 17px;
        left:245px;
    }
    .icon_2{
        width:24px;
        height:26px;
        display:block;
        background:url('../images/icon-notification.png');
        position:absolute;
        top: 17px;
        left:295px;
    }
    .icon_3{
        width:24px;
        height:26px;
        display:block;
        background:url('../images/icon-setting.png');
        position:absolute;
        top: 17px;
        left:345px;
    }
    .icon_4{
        display:block;
        width:36px;
        height: 36px;
        background-image:url('../images/users.png');
        position:absolute;
        top: 12px;
        right:65px;
    } */

    .Tabs_nav{
        width:100%;
        background-color:#fff;
        height:45px;
    }
    .main{
        height:100%;
        background-color:#eef4ff;
        margin:0 12px 12px 12px;
        min-height:512px;

    }
    .Tabs_ul{
        list-style-type:none;
        width:100%;
        height:35px;
        position:absolute;
        bottom:15px;
        border-bottom:3px solid #70cc10;
    }
    .Tabs_ul li{
        float:left;
        width: 133px;
        height: 35px;
    }
    .Tabs_ul li a{
        width: 133px;
        height: 35px;
        display:block;
        text-align:center;
        color:#fff;
        line-height:35px;
        background:url('../images/label_bg_normal.png') no-repeat left;
    }
    .Tabs_ul li a:hover{
        background-image:url('../images/label_bg_selected.png');
        z-index:100;
        border-bottom:2px solid #70cc10;
    }


    .mian_top{
        width: 100%;
        min-height: 295px;
        background-color:#fff;
        border-radius:3px;
    }

    .mian_top a{
        color:#333;
        font-weight:500;
    }
    .mian_right{
        margin-left:12px;
        min-height:510px;
        background-color:#fff;
        border-radius:3px;
    }
    .mian_Down{
        margin-top:12px;
        width: 100%;
        min-height:200px;
        background-color:#f60;
        border-radius:3px;
    }
    .logo_icon{
        text-indent:6.2em;
    }
    /* .cygj_nav{
        width: 100%;
        height: 38px;
        background-color:#fff;
        border-bottom:3px solid #6bc907;
        line-height:38px;
        text-indent:1em;
        font-size:16px;
        color:#444;
    } */
    /* .btn_1{
        margin-left:7px;
        width:20px;
        height:22px;
        border:none;
        background:url('../images/icon_common.png') no-repeat center;
    } */
    /*
    .icon_C1{
        color:#7ec632;
    }
    .btn_C2{
        float:right;
        width:100px;
        height:100%;
    }
    .btn_C2 li{
        float:left;
    }
    .btn_C2 li a{
        color:#777;
    } */
    /* .cygj_ul li{
        float:left;
        width:85px;
        height:110px;
        text-align:center;
        margin:10px 20px;
    } */

    .Table_B{
        width: 100%;
        height: 54px;
        background-color:#fff;
        margin-bottom:12px;
        border-radius:3px;
    }
    .Table_B ul li{
        float:left;
        margin:10px 5px 0 10px;
    }
    .Table_C{
        margin-top:5px;
        width: 100%;
        height:44px;
        background-color:#fff;
        line-height:44px;
    }
    .Table_C p{
        float:left;
    }
    .page1{
        float:right;
        margin-top:7px;
        margin-right:20px;
    }
</style>
<template>
    <div class="layout">
        <Header-nav></Header-nav>
        <!-- <Row>
                <div class="nav">
                    <img src="../images/logo_home.png" height="50" width="180" class="nav_logo">
                    <div class="nav_Home">企业端生产管理系统</div>
                    <div class="nav_Right">
                        <i-input icon="ios-search-strong" placeholder="搜索..." style="width: 200px" class="nav_Search"></i-input>
                       <a href="#" class="icon_1"></a>
                       <a href="#" class="icon_2"></a>
                       <a href="#" class="icon_3"></a>
                       <i-button type="ghost" shape="circle" class="icon_4"></i-button>
                    </div>
                </div>
        </Row> -->

        <Row type="flex">
            <i-col id="menu_left" span="4" class="layout-menu-left">
                <div class="layout-logo-left">
                        功能菜单
                        <a v-on:click="fns()"><Icon class="logo_icon" size="16" color="#5488ef" type="navicon-round"></Icon></a>
                </div>
            </i-col>
            <i-col span="20" style="background:#eef4ff;">
                <div class="Tabs_nav">
                    <ul class="Tabs_ul">
                        <li><a href="#" style="margin-left:18px">首页</a></li>
                        <li><a href="#" title="" style="margin-left:3px">生产管理</a></li>
                        <li><a href="#" title="" style="margin-left:-10px">用户管理</a></li>
                    </ul>
                </div>
                 <!-- <Tabs>
                    <Tab-pane label="macOS" icon="social-apple">标签一的内容</Tab-pane>
                    <Tab-pane label="Windows" icon="social-windows">标签二的内容</Tab-pane>
                    <Tab-pane label="Linux" icon="social-tux">标签三的内容</Tab-pane>
                </Tabs> -->
            </i-col>
            <i-col :class="main_left" :span="spanLeft" v-if="xianshi" class="layout-menu-left">
                <Menu active-key="1-2" width="auto">
                    <Submenu key="1">
                        <template slot="title">
                            <Icon color="#1b73fb" type="ios-home"></Icon>
                            系统首页
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="2">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-apps"></Icon>
                            系统管理
                        </template>
                        <Menu-item key="2-1">选项 1</Menu-item>
                        <Menu-item key="2-2">选项 2</Menu-item>
                    </Submenu>
                    <Submenu key="3">
                        <template slot="title">
                            <Icon color="#1b73fb" type="ios-bookmarks"></Icon>
                            基础资料
                        </template>
                        <Menu-item key="3-1">选项 1</Menu-item>
                        <Menu-item key="3-2">选项 2</Menu-item>
                    </Submenu>
                    <Submenu key="4">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-clipboard"></Icon>
                            业务资料
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="5">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-options"></Icon>
                            追溯码管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="6">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-create"></Icon>
                            用户管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="7">
                        <template slot="title">
                            <Icon color="#1b73fb" type="ios-recording"></Icon>
                            生产管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="8">
                        <template slot="title">
                            <Icon color="#1b73fb" type="ios-toggle"></Icon>
                            授权管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                </Menu>
            </i-col>
            <i-col :span="spanRight" style="background:#eef4ff">
                <div class="main">
                <Main-table></Main-table>
                <!-- <Row type="flex">
                    <div class="Table_B">
                        <ul>
                            <li><i-input icon="ios-search-strong" placeholder="按批次号..." style="width: 200px" class="nav_Search"></i-input></li>
                            <li><i-input icon="ios-search-strong" placeholder="按批次号..." style="width: 200px" class="nav_Search"></i-input></li>
                            <li><i-input icon="ios-arrow-down" placeholder="按批次号..." style="width: 200px" class="nav_Search"></i-input></li>
                            <li><i-input icon="ios-search-strong" placeholder="按产品..." style="width: 200px" class="nav_Search"></i-input></li>
                        </ul>
                    </div>
                    <i-table border :columns="columns14" :data="data1"></i-table>
                    <div class="Table_C">
                        <p>共<span style="color:red">1256</span>条记录，当前显示第<span style="color:red">1</span>页</p>
                        <div class="page1">
                            <Page :total="100"></Page>
                        </div>
                    </div>
                </Row> -->
                </div>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import HeaderNav from '../components/Header.vue';
    import CygjNav from '../components/cygj_nav.vue'
    import jgmNav from '../components/jgmyj_nav.vue'
    import TbNav from '../components/tjtb_nav.vue'
    import MainTable from '../components/MainTable.vue'
    export default {
        components:{
            HeaderNav,
            CygjNav,
            jgmNav,
            TbNav,
            MainTable
        },
        methods:{
            fns:function(){
                if (this.xianshi==true) {
                    this.xianshi=false;
                    this.spanRight=24;
                    this.spanLeft=0;
                }else{
                    this.xianshi=true;
                    this.spanLeft=4;
                    this.spanRight=20;
                };
            }
        },
        data () {
            return {
                xianshi:true,
                spanLeft:4,
                spanRight:20,
                // columns14: [
                //     {
                //         type: 'selection',
                //         width: 60,
                //         align: 'center'
                //     },
                //     {
                //         title: '编号',
                //         key: 'number'
                //     },
                //     {
                //         title: '工号',
                //         key: 'gonghao'
                //     },
                //     {
                //         title: '登录账户',
                //         key: 'user'
                //     },
                //     {
                //         title: '姓名',
                //         key: 'name'
                //     },
                //     {
                //         title: '性别',
                //         key: 'sex'
                //     },
                //     {
                //         title: '手机',
                //         key: 'mobile'
                //     },
                //     {
                //         title: '邮箱',
                //         key: 'email'
                //     },
                //     {
                //         title: '所在工厂',
                //         key: 'gongchang'
                //     },
                //     {
                //         title: '所在车间',
                //         key: 'chejian'
                //     },
                //     {
                //         title: '登录次数',
                //         key: 'cishu'
                //     },
                //     {
                //         title: '最后登录时间',
                //         key: 'address'
                //     },
                //     {
                //         title: '操作',

                //     }

                // ],
                // data1: [
                //     {
                //         name: '王小明',
                //         actioni: 18,
                //         address: '2017-01-01',
                //         number:1,
                //         gonghao:1,
                //         user:'ztf59',
                //         sex:'男',
                //         mobile:'12345678911',
                //         email:'ztf59@126.com',
                //         gongchang:'北京工厂1',
                //         chejian:'自动车间',
                //         cishu:'1'
                //     },
                //     {
                //         name: '张小刚',
                //         actioni: 25,
                //         address: '北京市海淀区西二旗',
                //         number:2,
                //         gonghao:1,
                //         user:'ztf74110',
                //         sex:'男',
                //         mobile:'12345678911'
                //     },
                //     {
                //         name: '李小红',
                //         actioni: 30,
                //         address: '上海市浦东新区世纪大道',
                //         number:3,
                //         gonghao:1
                //     },
                //     {
                //         name: '周小伟',
                //         actioni: 26,
                //         address: '深圳市南山区深南大道'
                //     }
                // ]
            }
        }
    }
</script>
